<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>会议室列表</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/form.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/meetcomm.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <style>
        .top-left-title {
            color: #151515;
            font-size: 0.8rem;
        }

        .div-header {
            width: 100%;
            position: fixed;
            height: 130px;
            overflow: hidden;
            overflow-x: auto;
            white-space: nowrap;
            /* 确保内容不会换行 */
            background-color: #fff;
            left: 0;
            padding: 15px 10px 0 10px;
            box-shadow: 0px 1px 5px 0px rgba(60, 128, 209, 0.12);
            z-index: 3;
        }

        .div-header-time {
            background-color: #f0f0f0;
            width: 90px;
            height: 65px;
            border-radius: 6px;
            text-align: center;
            display: inline-block;
            /* 让内容作为行内块显示 */
            margin-right: 15px;
        }

        .time-title {
            color: #999;
            font-size: 0.8rem;
        }

        .div-header-time-active {
            background-color: #0079fe;
            color: #fff;
        }

        .div-header-time-active .time-title {
            color: #fff;
        }

        .content-name {
            position: absolute;
            top: 20px;
            background: #0079fe;
            opacity: 0.6;
            color: #fff;
            padding: 2px 15px 2px 5px;
            border-radius: 0 20px 20px 0;
            z-index: 2;
        }

        .content-address {
            position: absolute;
            display: flex;
            top: 100px;
            background: #999;
            opacity: 0.7;
            color: #fff;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            padding: 7px 10px;
            padding-right: 20px;
        }

        .content-address div {
            line-height: 22px;
        }

        .tag-label {
            border-radius: 4px;
            border: solid 1px #0079fe;
            color: #0079fe;
            padding: 0px 5px;
            margin-right: 10px;
            display: inline-block;
            /* margin-bottom: 5px; */
            height: 22px;
            line-height: 22px;
            font-size: 12px;
            max-width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .new-tag-span {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }

        .new-tag-span .van-tag {
            width: 12px;
            line-height: unset;
            height: 12px;
            margin-right: 5px;
            border-radius: 50%;
        }

        .new-time-tip {
            position: absolute;
            top: -55px;
            width: 100%;
            background: #fff;
            z-index: 2;
            box-shadow: 0px 1px 5px 0px rgba(60, 128, 209, 0.12);
            padding: 10px;
            border-radius: 4px;
            left: 0;
        }

        .new-icon-list {
            font-size: 70px;
            color: #ddd;
            text-align: center;
            height: 160px;
        }

        .swipe-no-image {
            height: 160px;
            width: 100%;
            text-align: center;
            padding-top: 30px;
        }

        .display-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div id="app" class="uni-top uni-bottom80 " v-cloak>
        <div class="div-header">
            <div class="border-r aui-margin-b-5" v-on:click="dochooseproject()" style="position: fixed;">
                <a tapmode class="top-left-title">
                    <i class="icon iconfont icon-dingwei aui-font-size-16"></i>
                    {{ProjectName?ProjectName:'请选择'}}
                    <i class="icon iconfont icon-jiantou8"></i>
                </a>
            </div>
            <div class="div-header-time" v-on:click="onDayChoose(item)" v-for="item in dayList"
                v-bind:class="{'div-header-time-active':dayModel.ID==item.ID}" style="margin-top: 35px;">
                <div class="aui-padded-t-5">
                    <div class="time-title">{{item.Title}}</div>
                    <div class="text-blod ">{{item.MomentDate}}</div>
                </div>
            </div>
        </div>

        <div class="aui-content" style="padding-top: 145px;">
            <div class="uni-panel-hs border-r aui-margin-b-15" v-for="(item,index) in list">
                <div style="width:100%;height:160px;position:relative;">
                    <div v-on:click="openAdd(item)" class="content-name">{{item.RoomName}}({{item.PeopleNum}}人)</div>
                    <van-swipe :autoplay="3000" :height="160">
                        <van-swipe-item v-if="item.fileList.length<=0">
                            <div v-on:click="openAdd(item)" class="swipe-no-image">
                                <div class="display-center"><img src="../image/index/noinfomsg_icon.png" alt=""
                                        style="width: 120px;height: 70px;" /></div>
                                <div class="text-grey aui-font-size-12">暂无图片</div>
                            </div>
                        </van-swipe-item>
                        <van-swipe-item v-else v-for="(itemimg,itemindex) in item.fileList" :key="itemindex"><img
                                v-on:click="openAdd(item)" :src="itemimg.filePath"
                                style="width:100%;height:100%;border-radius:6px 6px 0 0;" />
                        </van-swipe-item>
                    </van-swipe>

                    <div class="content-address">
                        <div v-on:click="openAdd(item)">
                            <div><i class="icon iconfont icon-dingwei aui-font-size-12"></i> {{item.RoomAddr}}</div>
                            <div>开放时间：{{item.OpenStarTime}}-{{item.OpenEndTime}}</div>
                        </div>
                        <div><i v-on:click="tel_phone(item.Phone)"
                                class="icon iconfont icon-dianhua11 aui-font-size-20"></i></div>
                    </div>
                </div>
                <div class="aui-padded-b-15" style="margin:0 10px;">
                    <div class="aui-margin-t-10">
                        <label v-if="indexTag<4" class="tag-label"
                            v-for="(itemTag,indexTag) in item.RoomItemList">{{itemTag.Name}}</label>
                    </div>
                    <div v-if="item.list" class="aui-margin-t-10" style="width: 100%;">
                        <div class="aui-margin-t-10" style="display: flex; align-items: center; position: relative;">
                            <div v-for="(itemt,indext) in item.list" :style="{'width':100/item.list.length+'%'}"
                                class="new-time-div">
                                <div v-if="SelectIsOpen.ID==itemt.ID&&IsOpenAll&&itemt.IsOpen" class="new-time-tip">
                                    <div>
                                        会议室时间：{{itemt.nowDate}} {{itemt.tiptime}}-{{itemt.tipendtime}}
                                    </div>
                                </div>
                                <van-tag v-if="itemt.status==0" v-on:click="onOpenShowTime(item.list,itemt)"
                                    type="success" color="#ace6b1"
                                    style="width: 100%;padding:0;height:20px;border-radius:0;"></van-tag>
                                <van-tag v-if="itemt.status==1" v-on:click="onOpenShowTime(item.list,itemt)"
                                    type="warning" color="#fb8753"
                                    style="width: 100%; padding: 0; height: 20px; border-radius: 0;"></van-tag>
                                <van-tag v-if="itemt.status!=0&&itemt.status!=1" color="#ecf2fe"
                                    style="width: 100%; padding: 0; height: 20px; border-radius: 0;"></van-tag>
                                <div style="width: 100%; position: relative;margin-bottom:10px;">
                                    <span v-if="indext==0"
                                        style="position: absolute; right: 0; left: -10px; min-width: 2rem;font-size: 0.65rem;">{{itemt.timetitle}}</span>
                                    <!--<span v-if="itemt.showtime&&indext!=0" style="position: absolute; left: -15px; min-width: 2rem;font-size: 0.65rem; ">{{itemt.timetitle}}</span>-->
                                    <span v-if="indext==item.list.length-1"
                                        style="position: absolute; right: -10px; min-width: 2rem;font-size: 0.65rem;">{{itemt.endtimetitle}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="aui-margin-t-15">
                        <label style="display: flex;">
                            <span class="new-tag-span">
                                <van-tag :plain="false" color="#ecf2fe"></van-tag>空闲中
                            </span>
                            <span class="new-tag-span">
                                <van-tag :plain="false" color="#ace6b1"></van-tag>已预约
                            </span>
                            <span class="new-tag-span">
                                <van-tag :plain="false" color="#fb8753"></van-tag>会议中
                            </span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="notodayList" v-if="list.length>0">
                <label>没有更多内容</label>
            </div>

            <div class="noinfo" id="noorder" v-if="list.length<=0">
                <img src="../image/index/noinfomsg_icon.png" alt="" />
                <h5><br />暂无相关信息</h5>
            </div>
        </div>

        <!--所属项目-->
        <van-popup v-model:show="IsProject" closeable round :style="{ height: '50%',width:'80%',overflow:'hidden'}"
            teleport="body">
            <div class="project-popup-title">选择所属项目 <i class="aui-iconfont aui-icon-close project-rightclose"
                    v-on:click="dochooseproject()"></i></div>
            <div class="project-popup-top">
                <div @click="onChooseProject(item)" v-for="(item,index) in ProjectList" class="project-popup-header"
                    v-bind:class="{'project-popup-active':ProjectID==item.ID}">
                    <div class="uni-flex project-popup-content">
                        <div>{{item.Name}}</div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</body>
<script type="text/javascript " src="../script/api.js"></script>
<script type="text/javascript " src="../script/vue.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/aui-popup.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript " src="../script/moment/moment.js"></script>
<script type="text/javascript " src="js/visitormeetreserve.js"></script>

</html>